<template>
  <div class="about">
    <h1>对轮播组件测试</h1>
    <!--
      这里的style会在组件的根元素上生效
    - list:是图片列表数据，它是一个数组，保存要轮播图片信息
    - auto:2000. 开启自动播放。2000毫秒切换一张.
    - curIdx:初始播放第几张
-->
    <my-slider
      style="width:550px;height:350px;"
      :list="list"
      :curIdx='2'
      auto='2000'
      @click="hClick"
      @slider="hSlider"
      >
    </my-slider>
    <br> <br> <br> <br>
    <!-- <my-slider
      style="width:750px;height:550px;"
      :list="list1"
      :curIdx='1'
      auto='1000'
      >
    </my-slider> -->
  </div>
</template>

<script>
export default {
  name: 'SliderTest',
  data () {
    return {
      list: [
        {
          // url: require('./img/1.png'),
          url: './img/1.png',
          alt: '青海湖'
        },
        {
          url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2050907555,3556134029&fm=173&app=25&f=JPEG?w=640&h=424&s=5E7206C5EC007B472F18C8800300709B',
          alt: '乌镇'
        },
        {
          url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2930385341,2656794424&fm=173&app=25&f=JPEG?w=640&h=427&s=8F521CCD96833B4F743618330300C050',
          alt: '黄山'
        },
        {
          url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=2460882167,4287726830&fm=173&app=25&f=JPEG?w=639&h=424&s=9F12548398507EC651374DD00300709E',
          alt: '梅里雪山'
        },
        {
          url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3590873249,2618537390&fm=173&app=25&f=JPEG?w=640&h=426&s=3161E6A0881277C6453849160300C0D6',
          alt: '九寨黄龙'
        }
      ],
      list1: [
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597556120393&di=d5e69eeb340114e89c28cf36ae70df04&imgtype=0&src=http%3A%2F%2F01.minipic.eastday.com%2F20150520%2F20150520140551_09c713ccb39dbe60862cf5139f46bb79_19.jpeg',
          alt: '1'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597556120394&di=4f530163741f5b8bb37adf18c26f57ec&imgtype=0&src=http%3A%2F%2Fztd00.photos.bdimg.com%2Fztd%2Fw%3D700%3Bq%3D50%2Fsign%3D8922955a9b58d109c4e3abb2e163bd82%2Fa8014c086e061d955e0dc11c72f40ad162d9ca4f.jpg',
          alt: '2'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597556120394&di=ba186a8d749da1ac7748b4c5a59b390e&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F5%2F583ba200b108e.jpg',
          alt: '3'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597556120392&di=4b4497ba8d5901aaf7d6e2e0e2ab9c70&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-10-25%2F59f0247b848e0.jpg',
          alt: '4'
        },
        {
          url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1597556120390&di=b57225b10b89eda2e876ea33a113cc37&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F4%2F512ad4d27ced4.jpg',
          alt: '5'
        }
      ]
    }
  },
  methods: {
    hClick (index) {
      // alert(index)
      console.log('当前是', index, '被点击')
    },
    hSlider (idx) {
      console.log(idx)
    }
  }
}
</script>
